<template>
	<view class="content">
		<z-paging default-page-no="1" :auto="false" default-page-size="10" :fixed="false"
			:paging-style="{height:'85vh'}" ref="paging" v-model="table" @query="queryList">
			<view class="table" v-for="item in table" :key="item.id">
				<view class="title">
					<view class="name">
						{{item.type}}
					</view>
					<view :class="item.readStatus == '0' ? 'status' : 'active'">
						{{getCurrentNotificationStatus(item.readStatus)}}
					</view>
				</view>
				<view class="time">
					{{item.newDate}}
				</view>
				<view class="cont">
					{{item.content}}
				</view>
			</view>
		</z-paging>
		<view class="footer_view">
			<ym-footer></ym-footer>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	
	import {
		onShow
	} from '@dcloudio/uni-app'

	import {
		getNotificationList,
		updateNewStatus
	} from '../../apis/api.js'

	const docCode = ref("")
	const paging = ref()

	const table = ref([])

	onMounted(() => {
		const docUserInfo = uni.getStorageSync('userInfo')
		docCode.value = docUserInfo.docCode
		const userName = docUserInfo.docName
		uni.setNavigationBarTitle({
			title: userName
		})
		queryList(1, 10)
	})
	
	onShow(() => {
		uni.hideTabBarRedDot({
			index:1
		})
	})

	const queryList = async (pageNo, pageSize) => {
		try {
			let res = await getNotificationList({
				docCode: docCode.value,
				pageNo: pageNo,
				pageSize: pageSize
			})
			paging.value.complete(res.data.rows)
			updateNewsStatus(res.data.rows)
		} catch (e) {
			uni.showToast({
				title: '网络请求失败',
				icon: 'error'
			})
			paging.value.complete(false)
		}
	}

	const updateNewsStatus = async (arr) => {
		var newsArr = []
		for (let i = 0; i < arr.length; i++) {
			let dict = arr[i]
			if (dict.readStatus == '0') {
				newsArr.push(dict.newsId)
			}
		}
		try {
			let res = await updateNewStatus({
				newsIdList: newsArr
			})
			console.log(res)
		} catch (e) {
			//TODO handle the exception
		}
	}

	const getCurrentNotificationStatus = (status) => {
		let str = status == '0' ? '未读' : '已读'
		return str
	}
</script>

<style lang="scss" scoped>
	.table {
		width: 90%;
		margin: 24rpx auto 0 auto;
		background: #F7F8FA;
		padding: 28rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.title {
			display: flex;
			justify-content: space-between;

			.name {
				font-size: 28rpx;
				font-weight: bold;
			}

			.status {
				font-size: 24rpx;
				color: #0FC6C2;
			}

			.active {
				font-size: 24rpx;
				color: #86909C;
			}

		}

		.time {
			margin: 10rpx 0 16rpx 0;
			font-size: 24rpx;
			color: #86909C;
		}

		.cont {
			font-size: 30rpx;
			color: #1D2129;
			line-height: 50rpx;
		}
	}
	.footer_view {
		position: absolute;
		bottom: 0;
		width: 100%;
	}
</style>